<template>
    <div class="login-form-wrap">
        <el-form :model="loginForm" :rules="rulesForm" status-icon ref="loginForm" label-width="70px"
                 class="login-form">
            <!--ref 是vuejs提供的一个属性 -->
            <h2 ref="title" class="title">xxx 后台管理系统</h2>

            <el-form-item label="用户名" prop="username">
                <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="loginForm.password" autocomplete="new-password"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm()">登录</el-button>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>

    import {login} from '@/api/admin.js'

    export default {
        name: "index",
        data() {
            return {
                loginForm: {
                    username: '',
                    password: '',
                },
                rulesForm: {
                    /*自动验证*/
                    username: [
                        {required: true, message: '用户名不能为空'},
                    ],
                    password: [
                        {required: true, message: '密码不能为空'},
                    ]
                }
            }
        },
        methods: {
            submitForm() {
                // this.$refs 在vue里面获取 dom元素的集合
                // console.log(this.$refs.title.innerText);
                /*elementui 有提供自动验证的功能*/
                /* 校验表单是否合法 */
                this.$refs.loginForm.validate(async (valid) => {
                    if (valid) {
                        console.log(this.loginForm);
                        let info = await login(this.loginForm);
                        console.log(info);
                        let {meta: {status}, data: {token, id, username}} = info;
                        if (status == 200) {
                            // 存储登录的标识
                            localStorage.setItem('token', token);
                            localStorage.setItem('id', id);
                            localStorage.setItem('username', username);
                            // this.$message.success('登录成功，前往后台！');
                            this.$message({duration: 1000, message: '登录成功，前往后台！', type: 'success'});
                            this.$router.push('/admin');

                        } else {
                            this.$message.error('登录失败！');
                        }

                    } else {
                        this.$message.error('请填写用户信息');
                        return false;
                    }
                });

            },
            resetForm() {
                this.$refs.loginForm.resetFields();
            }

        }
    }
</script>

<style scoped lang="less">

    .login-form-wrap {
        border: 1px solid gold;
        width: 100%;
        height: 100%;

        /*https://www.grabient.com/*/
        background-color: #FFDEE9;
        background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);


        display: flex;
        justify-content: center;
        align-items: center;

        .title {
            color: #000;

            padding: 10px;
        }

        .login-form {
            padding-top: 10px;
            padding-right: 10px;
            width: 600px;
            border-radius: 10px;
            box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, .4);
        }
    }


</style>
